<template>
  <div class="forum-container">
    <div class="forum-header">
      <h1>讨论区</h1>
      <a-button type="primary">
        <template #icon>
          <icon-plus />
        </template>
        发布新话题
      </a-button>
    </div>
    
    <div class="forum-content">
      <div class="forum-sidebar">
        <div class="sidebar-section">
          <h3>分类</h3>
          <a-menu :selected-keys="['all']">
            <a-menu-item key="all">全部话题</a-menu-item>
            <a-menu-item key="study">学习方法</a-menu-item>
            <a-menu-item key="project">项目合作</a-menu-item>
            <a-menu-item key="question">问题解答</a-menu-item>
            <a-menu-item key="resource">资源分享</a-menu-item>
          </a-menu>
        </div>
        
        <div class="sidebar-section">
          <h3>热门标签</h3>
          <div class="tag-cloud">
            <a-tag color="blue" style="margin-bottom: 8px">Java</a-tag>
            <a-tag color="green" style="margin-bottom: 8px">Python</a-tag>
            <a-tag color="orange" style="margin-bottom: 8px">前端开发</a-tag>
            <a-tag color="purple" style="margin-bottom: 8px">数据结构</a-tag>
            <a-tag color="red" style="margin-bottom: 8px">算法</a-tag>
            <a-tag color="cyan" style="margin-bottom: 8px">数据库</a-tag>
            <a-tag color="gold" style="margin-bottom: 8px">机器学习</a-tag>
          </div>
        </div>
      </div>
      
      <div class="forum-main">
        <div class="forum-filter">
          <a-radio-group type="button" default-value="latest">
            <a-radio value="latest">最新</a-radio>
            <a-radio value="hot">热门</a-radio>
            <a-radio value="unanswered">未回复</a-radio>
          </a-radio-group>
          
          <a-input-search placeholder="搜索话题..." style="width: 250px" />
        </div>
        
        <div class="topic-list">
          <div v-for="(topic, index) in topics" :key="index" class="topic-card">
            <div class="topic-votes">
              <div class="vote-count">{{ topic.votes }}</div>
              <div class="vote-label">投票</div>
            </div>
            
            <div class="topic-main">
              <div class="topic-title">
                <router-link :to="`/communication/forum?topic=${topic.id}`">{{ topic.title }}</router-link>
                <a-tag :color="topic.tagColor" style="margin-left: 8px">{{ topic.tag }}</a-tag>
              </div>
              
              <div class="topic-excerpt">{{ topic.content }}</div>
              
              <div class="topic-meta">
                <div class="topic-author">
                  <a-avatar :size="24" :image-url="topic.authorAvatar">{{ topic.author.charAt(0) }}</a-avatar>
                  <span>{{ topic.author }}</span>
                </div>
                
                <div class="topic-stats">
                  <span><icon-eye /> {{ topic.views }}</span>
                  <span><icon-message /> {{ topic.replies }}</span>
                  <span>{{ topic.time }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <a-pagination 
            :total="50" 
            show-total 
            show-jumper 
            :page-size="10"
            style="margin-top: 20px; text-align: center;"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟数据
const topics = ref([
  {
    id: 1,
    title: '如何高效复习期末考试？',
    content: '大家好，我想请教一下有什么好的复习方法，特别是对于大量知识点的整合和记忆，有没有什么好的方法可以分享？我现在面临期末考试，感觉知识点太多，不知道如何有效复习...',
    author: '学习达人',
    authorAvatar: '',
    time: '3小时前',
    views: 128,
    replies: 23,
    votes: 15,
    tag: '学习方法',
    tagColor: '#2db7f5'
  },
  {
    id: 2,
    title: '关于最新实验报告的讨论',
    content: '这次实验报告的格式要求有变化，我想确认一下大家是否都清楚了具体的要求。特别是关于数据分析部分，教授说要使用新的分析方法，但我不太确定具体是哪种方法...',
    author: '实验小组长',
    authorAvatar: '',
    time: '昨天',
    views: 86,
    replies: 15,
    votes: 8,
    tag: '实验讨论',
    tagColor: '#87d068'
  },
  {
    id: 3,
    title: '寻找项目合作伙伴',
    content: '期末项目需要3-5人组队，我正在寻找对Web开发感兴趣的同学一起完成。项目是开发一个在线学习平台，需要前端和后端开发人员。我主要负责后端开发，希望能找到擅长前端的同学...',
    author: '项目达人',
    authorAvatar: '',
    time: '2天前',
    views: 210,
    replies: 42,
    votes: 25,
    tag: '项目合作',
    tagColor: '#108ee9'
  },
  {
    id: 4,
    title: '分享一些学习资源和工具',
    content: '最近发现了一些非常有用的学习资源和工具，想在这里分享给大家。包括一些编程学习网站、效率工具和电子书资源，希望对大家有所帮助...',
    author: '资源分享者',
    authorAvatar: '',
    time: '3天前',
    views: 175,
    replies: 28,
    votes: 36,
    tag: '资源分享',
    tagColor: '#f50'
  },
  {
    id: 5,
    title: '数据结构课程作业求助',
    content: '关于二叉树的平衡问题，我在实现AVL树的时候遇到了一些困难，特别是在旋转操作后如何更新高度值。有没有同学可以分享一下思路或者代码示例？',
    author: '编程新手',
    authorAvatar: '',
    time: '4天前',
    views: 92,
    replies: 17,
    votes: 7,
    tag: '问题解答',
    tagColor: '#722ed1'
  }
]);
</script>

<style scoped lang="less">
.forum-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  
  .forum-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    
    h1 {
      font-size: 28px;
      font-weight: 600;
      margin: 0;
      color: #333;
    }
  }
  
  .forum-content {
    display: flex;
    gap: 24px;
    
    .forum-sidebar {
      width: 240px;
      flex-shrink: 0;
      
      .sidebar-section {
        background: #fff;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        
        h3 {
          font-size: 16px;
          font-weight: 600;
          margin-top: 0;
          margin-bottom: 16px;
          padding-bottom: 8px;
          border-bottom: 1px solid #f0f0f0;
        }
        
        .tag-cloud {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }
      }
    }
    
    .forum-main {
      flex: 1;
      
      .forum-filter {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
      }
      
      .topic-list {
        .topic-card {
          display: flex;
          background: #fff;
          border-radius: 8px;
          padding: 16px;
          margin-bottom: 16px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          transition: all 0.3s;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }
          
          .topic-votes {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 60px;
            margin-right: 16px;
            
            .vote-count {
              font-size: 20px;
              font-weight: 600;
              color: #1890ff;
            }
            
            .vote-label {
              font-size: 12px;
              color: #999;
            }
          }
          
          .topic-main {
            flex: 1;
            
            .topic-title {
              font-size: 18px;
              font-weight: 600;
              margin-bottom: 8px;
              
              a {
                color: #333;
                text-decoration: none;
                
                &:hover {
                  color: #1890ff;
                }
              }
            }
            
            .topic-excerpt {
              color: #666;
              font-size: 14px;
              line-height: 1.5;
              margin-bottom: 12px;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
            
            .topic-meta {
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              .topic-author {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 14px;
                color: #666;
              }
              
              .topic-stats {
                display: flex;
                gap: 16px;
                font-size: 12px;
                color: #999;
                
                span {
                  display: flex;
                  align-items: center;
                  gap: 4px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>